<template>
  <div class="hotel-detail">
    <div class="page-header">
      <div class="header-content">
        <h2>{{ hotelInfo.name }}</h2>
        <el-tag :type="getStatusType(hotelInfo.status)" class="status-tag">
          {{ getStatusText(hotelInfo.status) }}
        </el-tag>
      </div>
      <div class="header-actions">
        <el-button-group>
          <el-button type="primary" @click="handleEdit" :icon="Edit"
            >编辑</el-button
          >
          <el-button type="danger" @click="handleDelete" :icon="Delete"
            >删除</el-button
          >
        </el-button-group>
      </div>
    </div>

    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span>基本信息</span>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="酒店名称">{{
          hotelInfo.name
        }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{
          hotelInfo.contact
        }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{
          hotelInfo.phone
        }}</el-descriptions-item>
        <el-descriptions-item label="房型数量">{{
          hotelInfo.roomTypes
        }}</el-descriptions-item>
        <el-descriptions-item label="评分">
          <el-rate
            v-model="hotelInfo.rating"
            disabled
            show-score
            text-color="#ff9900"
          />
        </el-descriptions-item>
        <el-descriptions-item label="地址">{{
          hotelInfo.address
        }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span>酒店介绍</span>
        </div>
      </template>
      <p class="description">{{ hotelInfo.description }}</p>
    </el-card>

    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span>设施服务</span>
        </div>
      </template>
      <div class="facilities">
        <el-tag
          v-for="facility in hotelInfo.facilities"
          :key="facility"
          class="facility-tag"
        >
          {{ facility }}
        </el-tag>
      </div>
    </el-card>

    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span>酒店图片</span>
        </div>
      </template>
      <el-image-viewer
        v-if="showViewer"
        :url-list="hotelInfo.images"
        @close="showViewer = false"
      />
      <div class="image-list">
        <div
          v-for="(image, index) in hotelInfo.images"
          :key="index"
          class="image-item"
          @click="handlePreview(index)"
        >
          <el-image :src="image" fit="cover">
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Edit, Delete, Picture } from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();
const showViewer = ref(false);

// 酒店信息
const hotelInfo = ref({
  id: 1,
  name: "贵港大酒店",
  address: "贵港市港北区市中心广场1号",
  contact: "张经理",
  phone: "0775-1234567",
  roomTypes: 5,
  rating: 4.8,
  status: "approved",
  description: "位于市中心，交通便利，设施齐全",
  facilities: ["停车场", "游泳池", "健身房", "会议室"],
  images: ["/images/hotels/hotel1.jpg"],
});

// 获取状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    pending: "warning",
    approved: "success",
    rejected: "danger",
  };
  return typeMap[status];
};

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    pending: "待审核",
    approved: "已通过",
    rejected: "已拒绝",
  };
  return textMap[status];
};

// 获取酒店详情
const fetchHotelDetail = async () => {
  try {
    // TODO: 调用API获取酒店详情
    // const res = await getHotelDetail(route.params.id)
    // hotelInfo.value = res.data
  } catch (error) {
    console.error("获取酒店详情失败：", error);
    ElMessage.error("获取酒店详情失败");
  }
};

// 编辑酒店
const handleEdit = () => {
  router.push(`/admin/hotels/edit/${hotelInfo.value.id}`);
};

// 删除酒店
const handleDelete = () => {
  ElMessageBox.confirm(
    `确定要删除酒店"${hotelInfo.value.name}"吗？`,
    "删除确认",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    },
  )
    .then(() => {
      // TODO: 调用删除API
      ElMessage.success("删除成功");
      router.push("/admin/hotels");
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

// 预览图片
const handlePreview = (index) => {
  showViewer.value = true;
};

onMounted(() => {
  fetchHotelDetail();
});
</script>

<style scoped>
.hotel-detail {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-content h2 {
  margin: 0;
  font-size: 24px;
  color: var(--el-text-color-primary);
}

.status-tag {
  font-size: 14px;
}

.info-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.description {
  margin: 0;
  line-height: 1.6;
  color: var(--el-text-color-regular);
}

.facilities {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.facility-tag {
  margin-right: 0;
}

.image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.image-item {
  aspect-ratio: 4/3;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s;
}

.image-item:hover {
  transform: scale(1.02);
}

.image-item .el-image {
  width: 100%;
  height: 100%;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--el-fill-color-lighter);
  color: var(--el-text-color-secondary);
}
</style>
